<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
      <style>
        #red{
            color: aqua;
        }
        .abc{
            color:red;
        }
      </style>
<script src="../js/vue.js"></script>
<body>
     <div id="app">
        <button @click="count++">
            Count is: {{ count }}
        </button> 
        <span v-html="str"></span>
        <span v-bind="sb">{{ message.split("").reverse().join("") }}</span>
        <span :class="ab">{{  number+1 }}</span>
    </div>
    <script>
      Vue.createApp({
        data(){
            return{
                count:0,
                str:"<h1>大标题</h1>",
                message:"abc",
                number:100,
                sb:{
                    id:"red",
                    class:"abc"
                }
            }
        }
      }).mount("#app")
       //data实例属性
            //methods方法
            //computed计算属性
            //watch侦听(响应式属性)
            //template组件模板
            //props组件内声明属性
            //emits组件内声明事件
            //components注册组件
    </script>


</body>
</html>